// ==========================================================================
// Base – Mobile-First Grid
// ==========================================================================

// Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
.clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; }
.row:before, .row:after { content: ""; display: table; } .row:after { clear: both; }

.row {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
}

// Mobile Container
.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.container-full {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
// Tablet Container
@media only screen and (min-width: @tablet-breakpoint) {
  .container, .container-full {
    width: @tablet-container;
  }
  .tablet-container {
    width: @tablet-container;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .tablet-container-full {
    width: @tablet-container;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
// Desktop Container
@media only screen and (min-width: @desktop-breakpoint) {
  .container, .container-full {
    width: @desktop-container;
  }
  .desktop-container {
    width: @desktop-container;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .desktop-container-full {
    width: @desktop-container;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
// HD Container
@media only screen and (min-width: @hd-breakpoint) {
  .container, .container-full {
    width: @hd-container;
  }
  .hd-container {
    width: @hd-container;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .hd-container-full {
    width: @hd-container;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

// Mobile-first Grid Columns - Global Rules
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  float: left;
}

// Mobile-first Grid
.generate-grid (12);
.generate-grid (@index) when (@index > 0) {
  .generate-grid (@index - 1);
  .col-@{index} {
    width: @index / 12 * 100%;
  }
}

// Mobile Push Offsets
.generate-push-offsets (11);
.generate-push-offsets (@index) when (@index > 0) {
  .generate-push-offsets (@index - 1);
  .push-@{index} {
    left: @index / 12 * 100%;
  }
}

// Mobile Pull Offsets
.generate-pull-offsets (11);
.generate-pull-offsets (@index) when (@index > 0) {
  .generate-pull-offsets (@index - 1);
  .pull-@{index} {
    left: -@index / 12 * 100%;
  }
}

// Mobile Helpers
.hide-mobile { display: none; }
.show-mobile { display: block; }
.show-mobile-inline-block { display: inline-block; }
.show-mobile-inline { display: inline; }

// Tablet Grid
@media only screen and (min-width: @tablet-breakpoint) {
  
  // Tablet Grid Columns - Global Rules
  .col-tablet-1, .col-tablet-2, .col-tablet-3, .col-tablet-4, .col-tablet-5, .col-tablet-6, .col-tablet-7, .col-tablet-8, .col-tablet-9, .col-tablet-10, .col-tablet-11, .col-tablet-12 {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    float: left;
  }

  // Tablet Grid
  .generate-tablet-grid (12);
  .generate-tablet-grid (@index) when (@index > 0) {
    .generate-tablet-grid (@index - 1);
    .col-tablet-@{index} {
      width: @index / 12 * 100%;
    }
  }

  // Tablet Push Offsets
  .generate-tablet-push-offsets (11);
  .generate-tablet-push-offsets (@index) when (@index > 0) {
    .generate-tablet-push-offsets (@index - 1);
    .push-tablet-@{index} {
      left: @index / 12 * 100%;
    }
  }

  // Tablet Pull Offsets
  .generate-tablet-pull-offsets (11);
  .generate-tablet-pull-offsets (@index) when (@index > 0) {
    .generate-tablet-pull-offsets (@index - 1);
    .pull-tablet-@{index} {
      left: -@index / 12 * 100%;
    }
  }

  // Tablet Helpers
  .hide-tablet { display: none; }
  .show-tablet { display: block; }
  .show-tablet-inline-block { display: inline-block; }
  .show-tablet-inline { display: inline; }
  .tablet-no-padding { padding: 0; }
  .tablet-no-push, .tablet-no-pull { left: 0; }
}

// Desktop Grid
@media only screen and (min-width: @desktop-breakpoint) {
  
  // Desktop Grid Columns - Global Rules
  .col-desktop-1, .col-desktop-2, .col-desktop-3, .col-desktop-4, .col-desktop-5, .col-desktop-6, .col-desktop-7, .col-desktop-8, .col-desktop-9, .col-desktop-10, .col-desktop-11, .col-desktop-12 {   padding-left: 15px;
    padding-right: 15px;
    position: relative;
    float: left;
  }

  // Desktop Grid
  .generate-desktop-grid (12);
  .generate-desktop-grid (@index) when (@index > 0) {
    .generate-desktop-grid (@index - 1);
    .col-desktop-@{index} {
      width: @index / 12 * 100%;
    }
  }

  // Desktop Push Offsets
  .generate-desktop-push-offsets (11);
  .generate-desktop-push-offsets (@index) when (@index > 0) {
    .generate-desktop-push-offsets (@index - 1);
    .push-desktop-@{index} {
      left: @index / 12 * 100%;
    }
  }

  // Desktop Pull Offsets
  .generate-desktop-pull-offsets (11);
  .generate-desktop-pull-offsets (@index) when (@index > 0) {
    .generate-desktop-pull-offsets (@index - 1);
    .pull-desktop-@{index} {
      left: -@index / 12 * 100%;
    }
  }

  // Desktop Helpers
  .hide-desktop { display: none; }
  .show-desktop { display: block; }
  .show-desktop-inline-block { display: inline-block; }
  .show-desktop-inline { display: inline; }
  .desktop-no-padding { padding: 0; }
  .desktop-no-push, .desktop-no-pull { left: 0; }
}

// HD Grid
@media only screen and (min-width: @hd-breakpoint) {
  
  // HD Grid Columns - Global Rules
  .col-hd-1, .col-hd-2, .col-hd-3, .col-hd-4, .col-hd-5, .col-hd-6, .col-hd-7, .col-hd-8, .col-hd-9, .col-hd-10, .col-hd-11, .col-hd-12 {   padding-left: 15px;
    padding-right: 15px;
    position: relative;
    float: left;
  }

  // HD Grid
  .generate-hd-grid (12);
  .generate-hd-grid (@index) when (@index > 0) {
    .generate-hd-grid (@index - 1);
    .col-hd-@{index} {
      width: @index / 12 * 100%;
    }
  }

  // HD Push Offsets
  .generate-hd-push-offsets (11);
  .generate-hd-push-offsets (@index) when (@index > 0) {
    .generate-hd-push-offsets (@index - 1);
    .push-hd-@{index} {
      left: @index / 12 * 100%;
    }
  }

  // HD Pull Offsets
  .generate-hd-pull-offsets (11);
  .generate-hd-pull-offsets (@index) when (@index > 0) {
    .generate-hd-pull-offsets (@index - 1);
    .pull-hd-@{index} {
      left: -@index / 12 * 100%;
    }
  }

  // HD Helpers
  .hide-hd { display: none; }
  .show-hd { display: block; }
  .show-hd-inline-block { display: inline-block; }
  .show-hd-inline { display: inline; }
  .hd-no-padding { padding: 0; }
  .hd-no-push, .hd-no-pull { left: 0; }
}